import { t } from '../../hooks/web/useI18n';
<template>
  <div class="home-index">
    <el-row :gutter="20" style="margin-bottom: 40px">
      <el-col :span="6">
        <div class="panel-box one">
          <div class="panel-title">报警数量</div>
          <div class="panel-content">{{ statisticsData.alarmCount }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="panel-box two">
          <div class="panel-title">设备数量</div>
          <div class="panel-content">{{ statisticsData.terminalDeviceCount }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="panel-box three">
          <div class="panel-title"> 被监测设备数量 </div>
          <div class="panel-content">{{ statisticsData.monitorDeviceCount }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="panel-box four">
          <div class="panel-title">任务数量</div>
          <div class="panel-content">{{ statisticsData.taskCount }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 40px">
      <el-col :span="6">
        <div class="panel-chart">
          <div class="title">设备状态统计</div>
          <div class="chart-box" ref="deviceStatusChartRef"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="panel-chart">
          <div class="title">webhook数量统计</div>
          <div class="chart-box" ref="webhookChartRef"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="panel-chart">
          <div class="title">
            <span>告警级别数量统计</span>
            <el-radio-group v-model="alarmLevelTimeRangeType" @change="updateAlarmLevelOptions">
              <el-radio-button
                v-for="item in timeRangeArray"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-radio-group>
          </div>
          <div class="chart-box" ref="alarmLevelChartRef"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="panel-chart">
          <div class="title">
            <span>被监测设备告警统计</span>
            <el-radio-group v-model="monitorAlarmTimeRangeType" @change="updateMonitorAlarmOptions">
              <el-radio-button
                v-for="item in timeRangeArray"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-radio-group>
          </div>
          <div class="chart-box" ref="monitorAlarmChartRef"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { HomeApi } from '@/api/vmiot/home'
import { AlarmRecordApi, AlarmRecordVO } from '@/api/vmiot/alarmrecord'
import * as echarts from 'echarts'
const deviceStatusChartRef = ref<HTMLDivElement | null>(null)
const webhookChartRef = ref<HTMLDivElement | null>(null)
const alarmLevelChartRef = ref<HTMLDivElement | null>(null)
const monitorAlarmChartRef = ref<HTMLDivElement | null>(null)

let deviceStatusChart: echarts.ECharts | null = null
let webhookChart: echarts.ECharts | null = null
let alarmLevelChart: echarts.ECharts | null = null
let monitorAlarmChart: echarts.ECharts | null = null

import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
appStore.fetchAppSettings()

const timeRangeArray = [
  { label: '昨天', value: 1 },
  { label: '今天', value: 2 },
  { label: '近七天', value: 3 },
  { label: '近一月', value: 4 }
]

const alarmLevelTimeRangeType = ref(4)
const monitorAlarmTimeRangeType = ref(4)

/**
 * 更新设备状态统计图
 */
const updateDeviceStatusOptions = () => {
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '设备状态统计',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        roseType: 'radius',
        label: {
          formatter: '{b}\n{c}'
        },
        data: [
          {
            value: statisticsData.value.terminalDeviceOnlineCount,
            name: '在线设备',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            }
          },
          {
            value: statisticsData.value.terminalDeviceOfflineCount,
            name: '离线设备',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#f0f0f0' },
                { offset: 1, color: '#bbb' }
              ])
            }
          }
        ]
      }
    ]
  }

  deviceStatusChart?.setOption(option)
  deviceStatusChart?.resize()
}

/**
 * 更新webhook数量统计图
 */
const updateWebhookOptions = () => {
  const option = {
    tooltip: {
      trigger: 'item'
    },
    color: [
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#83bff6' },
        { offset: 0.5, color: '#188df0' },
        { offset: 1, color: '#188df0' }
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#F0961A' },
        { offset: 1, color: '#FF5957' }
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#a18cd1' },
        { offset: 1, color: '#fbc2eb' }
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#f6d365' },
        { offset: 1, color: '#fda085' }
      ])
    ],
    series: [
      {
        name: 'webhook数量统计',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        roseType: 'radius',
        label: {
          formatter: '{b}\n{c}'
        },
        data: [
          {
            value: statisticsData.value.webhookCustomCount,
            name: '自定义'
          },
          {
            value: statisticsData.value.webhookDingCount,
            name: '钉钉'
          },
          {
            value: statisticsData.value.webhookFsCount,
            name: '飞书'
          },
          {
            value: statisticsData.value.webhookQywxCount,
            name: '企业微信'
          }
        ]
      }
    ]
  }

  webhookChart?.setOption(option)
  webhookChart?.resize()
}

/**
 * 更新告警级别统计图
 */
const updateAlarmLevelOptions = async () => {
  const groupCountList = await AlarmRecordApi.getMyGroupCount({
    timeRangeType: alarmLevelTimeRangeType.value,
    groupField: 'alarm_level'
  })
  const data1 = groupCountList.find((item) => item.groupField === 1)?.totalCount || 0
  const data2 = groupCountList.find((item) => item.groupField === 2)?.totalCount || 0
  const data3 = groupCountList.find((item) => item.groupField === 3)?.totalCount || 0
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '20%',
      left: '5%',
      right: '5%',
      bottom: '10%'
    },

    xAxis: {
      type: 'category',
      data: ['一级报警', '二级报警', '三级报警']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [data1, data2, data3],
        type: 'bar',
        itemStyle: {
          normal: {
            color: function (params) {
              var colorList = ['#ff0844', '#F88D14', '#f9d423']
              return colorList[params.dataIndex]
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{b}\n{c}'
            }
          }
        }
      }
    ]
  }

  alarmLevelChart?.setOption(option)
  alarmLevelChart?.resize()
}

const updateMonitorAlarmOptions = async () => {
  const groupCountList = await AlarmRecordApi.getMyGroupCount({
    timeRangeType: monitorAlarmTimeRangeType.value,
    groupField: 'monitor_device_name'
  })
  const groupFieldList = groupCountList.map((item) => item.groupField)
  const totalCountList = groupCountList.map((item) => item.totalCount)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '20%',
      left: '5%',
      right: '5%',
      bottom: '10%'
    },
    xAxis: {
      type: 'category',
      data: groupFieldList
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: totalCountList,
        type: 'bar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          }
        }
      }
    ]
  }

  monitorAlarmChart?.setOption(option)
  monitorAlarmChart?.resize()
}

const statisticsData = ref({
  alarmCount: 0,
  monitorDeviceCount: 0,
  taskCount: 0,
  terminalDeviceCount: 0,
  terminalDeviceOfflineCount: 0,
  terminalDeviceOnlineCount: 0,
  webhookCustomCount: 0,
  webhookDingCount: 0,
  webhookFsCount: 0,
  webhookQywxCount: 0
})
const initChart = async () => {
  statisticsData.value = await HomeApi.getStatistics()

  deviceStatusChart = echarts.init(deviceStatusChartRef.value as HTMLDivElement)
  webhookChart = echarts.init(webhookChartRef.value as HTMLDivElement)

  updateDeviceStatusOptions()
  updateWebhookOptions()
}

const initAlarmLevel = async () => {
  alarmLevelChart = echarts.init(alarmLevelChartRef.value as HTMLDivElement)
  updateAlarmLevelOptions()
}

const initMonitorAlarm = async () => {
  monitorAlarmChart = echarts.init(monitorAlarmChartRef.value as HTMLDivElement)
  updateMonitorAlarmOptions()
}

onMounted(() => {
  initChart()
  initAlarmLevel()
  initMonitorAlarm()
})
</script>

<style lang="scss" scoped>
.home-index {
  height: 100%;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}
.panel-box {
  height: 168px;
  background-color: #e2eeff;
  border-radius: 6px;
  padding: 16px 20px;

  .panel-title {
    line-height: 30px;
    color: #2674b4;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    padding-left: 15px;
    margin-bottom: 10px;

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 5px;
      height: 16px;
    }
  }

  .panel-content {
    color: #333333;
    font-size: 30px;
    padding: 20px;
    font-weight: 750;
  }

  &.one {
    background: #e2eeff url('@/assets/home/home1.png') no-repeat right center / 50% 100%;
    .panel-title {
      &:before {
        background-color: #fa415f;
      }
    }
  }
  &.two {
    background: #e2eeff url('@/assets/home/home2.png') no-repeat right center / 50% 100%;
    .panel-title {
      &:before {
        background-color: #227be7;
      }
    }
  }
  &.three {
    background: #e2eeff url('@/assets/home/home3.png') no-repeat right center / 50% 100%;
    .panel-title {
      &:before {
        background-color: #a200ff;
      }
    }
  }
  &.four {
    background: #e2eeff url('@/assets/home/home4.png') no-repeat right center / 50% 100%;
    .panel-title {
      &:before {
        background-color: #00b23c;
      }
    }
  }
}

.panel-chart {
  .title {
    color: #333333;
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-box {
    height: 260px;
  }
}
</style>
